<template>
	<!-- 头部橘色调部分 -->
	<view class="home-header">
		<view class="home-header_1">
			<view class="home-header_1-left">
				<text class="iconfont icon-erweima"></text>
				<text class="home-header_address">长春桥路</text>
				<text class="iconfont icon-erweima"></text>
				<text class="home-header_1-left-popconfirm">北京万泉庄</text>
			</view>
			<view class="home-header_1-center">
				<input @click="search" placeholder-class="iconfont icon-arrow-right" class="header-input" type="text"
					placeholder="请输入文本" placeholder-style="color:'red'" />
			</view>
			<view class="home-header-rightTop">
				<text class="iconfont icon-erweima"></text><br />
				<text>送到家</text>
			</view>
		</view>
		<!-- 支付码，优惠券，钱包充值等 -->
		<view class="home-header_2">
			<view class="home-header-item">
				<text class="iconfont icon-camera home-header-item_icon"></text><br />
				<text>支付码</text>
			</view>
			<view class="home-header-item" @click="openMyCoupon">
				<text class="iconfont icon-camera home-header-item_icon"></text><br />
				<text>优惠券</text>
			</view>
			<view class="home-header-item">
				<text class="iconfont icon-camera home-header-item_icon"></text><br />
				<text>钱包·充值</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {

			search() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			openMyCoupon(){
				uni.navigateTo({
					url:'/pages/myCoupon/myCoupon'
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-header {
		height: 180px;
		background-color: #E1218B;
		color: #fff;

		.home-header_1 {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 15px;

			.home-header_1-left {
				margin-right: 10px;
				position: relative;

				.home-header_address {
					font-size: 18px;
				}

				.home-header_1-left-popconfirm {
					position: absolute;
					left: 0;
					bottom: -29px;
					padding: 2px 8px;
					background: #fdc1c1;
					opacity: .9;
					border-radius: 17px;
					font-size: 14px;
				}

				.home-header_1-left-popconfirm:before {
					content: '';
					padding: 5px;
					transform: rotate(-45deg);
					background-color: #fdc1c1;
					opacity: .9;
					position: absolute;
					left: 10px;
					top: -3px;
				}
			}

			.home-header-rightTop {
				text-align: center;
			}

			.home-header_1-center {
				width: 46%;

				.header-input {
					border-radius: 18px;
					background: #fff;
					height: 33px;
					padding: 0 10px;
					/* box-sizing: border-box; */
				}
			}
		}

		/* 支付码，优惠券，钱包充值等 */
		.home-header_2 {
			padding: 0 15px;
			height: 80px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			line-height: 35px;
			margin-top: 40px;

			.home-header-item {
				text-align: center;

				.home-header-item_icon {
					font-size: 36px;
				}
			}
		}

	}
</style>
